<template>
  <div>
    <el-container style="height:900px">
      <el-aside width="100px"></el-aside>
      <el-main>
        <el-card class="box-card" style="width: 1350px;height: 300px">
          <el-form ref="form" :model="searchForm" label-width="80px">
            <el-form-item label="搜索">
              <el-input v-model="searchForm.content" placeholder="请输入内容" style="width:1100px"></el-input>
              <el-button type="primary" icon="el-icon-search" @click="searchTopicFunction">搜索</el-button>
            </el-form-item>
            <el-form-item label="科目">
              <el-select v-model="searchForm.object" placeholder="请选择活动区域">
                <el-option :label="o.value" :value="o.id" v-for="o in this.topicObjectList" :key="index"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="题型">
              <el-radio-group v-model="checkedType.id">
                <el-radio :label="o.id" v-for="o in this.topicTypeList" :key="index">{{o.value}}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="难度">
              <el-radio-group v-model="checkedDifficult.id">
                <el-radio :label="o.id" v-for="o in this.topicDifficultList" :key="index">{{o.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card class="box-card" style="margin-left: 10px;margin-top:30px;width: 1350px;height: 70px">
          <div slot="header" class="clearfix" style="height: 20px">
            <span style="float:left;margin-top: -70px">搜索结果</span>
            <span style="float:left;margin-top: -70px">（{{this.total}}）</span>
          </div>
        </el-card>
        <el-card class="box-card" v-for="t in respSearchResultTopicList" :key="index"
                 style="margin-left: 10px;margin-top: -1px;width: 1350px;height: 120px"
                 v-show="showSearchResult" >
          <div slot="" class="clearfix" style="height: 80px;">
                  <span style="float:left;height: 20px;">
                    <el-link target="_blank" @click="showTopicBtn(t.id)" style="font-size: 16px;margin-top: -100px">{{ t.content }}</el-link>
                  </span>
          </div>
          <div style="float:left;margin-top: -100px">
            <i :class="t.userIsCollect==true?'el-icon-star-on':'el-icon-star-off'"><span style="font-size: 12px">{{t.collectNum}}</span></i>
            <i class="el-icon-chat-dot-square" style="margin-left: 30px"><span style="font-size: 12px">{{t.commentNum}}</span></i>
          </div>
        </el-card>
        <!--分页组件-->
        <div class="block" v-show="showPagination" style="float:left;margin-left: 200px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-sizes="[3, 5]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "searchTopic",
  data(){
    return{
      selectObjectValue:'',
      searchForm:{  //科目的表单
        content:'',
        object:''
      },
      checkedType:{ //被选中的题型
        id:'',effect:'plain'
      },
      checkedDifficult:{ //被选中的难度
        id:''
      },
      topicObjectList:[{
        id:'',value:''
      }],
      topicTypeList:[{
        id:'',value:'',effect:'plain'
      }],
      topicDifficultList:[{
        id:'',value:''
      }],
      searchTopicList:[{
        collectNum: '',
        commentNum: '',
        content: '',
        id: '',
        time: '',
        topicId: ''
      }],
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: false, //分页栏是否显示
      respSearchResultTopicList:[{
        collectNum: '',
        commentNum: '',
        content:'',
        id: '',
        pageNo: '',
        pageSize: '',
        userIsCollect:''
      }],
      showSearchResult:false,
    }
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.searchTopicFunction();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.searchTopicFunction();
      //console.log(`当前页: ${val}`);
    },

    //获取题的科目、题型、难度
    getTopicObjectTypeDifficultList(){
      this.$axios.get("/api/searchTopic/getTopicObjectTypeDifficultListJ").then(resp=>{
        console.log(resp);
        this.topicObjectList=resp.data.data.topicObjectList;
        this.topicTypeList=resp.data.data.topicTypeList;
        this.topicDifficultList=resp.data.data.topicDifficultList;
      })
    },
    //被选中的题型
    selectType(id){
      this.checkedType.id=id;
      this.checkedType.effect='dark'
    },
    //搜索题目按钮
    searchTopicFunction(){
      this.$axios.post("/api/searchTopic/getSearchTopicListJ",{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize,
        content:this.searchForm.content,
        objectId:this.searchForm.object,
        typeId:this.checkedType.id,
        difficultId:this.checkedDifficult.id
      }).then(resp=>{
        console.log(resp)
        if(this.respSearchResultTopicList.length.searchResultTopic!=0){
          this.showSearchResult=true;
          this.respSearchResultTopicList=resp.data.data.searchResultTopic;
          this.total=resp.data.data.total;
          this.showPagination=true;
        }
      })
    },
    //点击题目触发
    showTopicBtn(id){
      //跳转页面到详细题目页面，将题目id传过去
      let routeData = this.$router.resolve({
        path: "/showTopic",
        query: {
          id:id
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    //index导航栏中搜索
    indexSearch(){
      if(this.$route.query.searchText!=''){ //如果不为空，我们就开始进行搜索
        this.searchForm.content=this.$route.query.searchText;
        this.searchTopicFunction();
      }
    }

  },
  created() {
    //获取题的科目、题型、难度
    this.getTopicObjectTypeDifficultList();
    //导航栏中搜索框中点击搜索按钮触发的事件
    this.indexSearch();
  }
}
</script>

<style scoped>

</style>